<template>
  <div>
    <div>
      <el-form size="medium">
        <el-form :inline="true">
          <el-form-item label="金融产品公司名称">
            <el-input v-model="companyName"
                      placeholder="请输入金融产品公司名称"></el-input>
          </el-form-item>
          <el-form-item label="金融产品经理">
            <el-input v-model="manager"
                      placeholder="请输入金融产品经理"></el-input>
          </el-form-item>
          <el-form-item size="large">
            <el-button type="primary"
                       @click="getSupplierList">查询</el-button>
            <el-button type="primary"
                       @click="reset">重置</el-button>
          </el-form-item>
        </el-form>
        <el-form :inline="true">
          <el-form-item label="金融产品特性标签">
            <el-input v-model="label"
                      placeholder="请输入金融产品特性标签"></el-input>
          </el-form-item>
        </el-form>
      </el-form>
      <div class="button-area">
        <el-button @click="() => {this.$router.push({ path: '/supplier/new' })}"
                   type="primary"
                   style="float:right"
                   size="small">新增</el-button>
      </div>
      <el-table ref="multipleTable"
                border
                stripe
                :data="supplierList"
                tooltip-effect="dark"
                style="width: 100%"
                @selection-change="handleSelectionChange">
        <el-table-column type="selection"
                         width="40">
        </el-table-column>
        <el-table-column prop="companyName"
                         label="金融产品公司全称"></el-table-column>
        <el-table-column prop="productManager"
                         label="金融产品经理"></el-table-column>
        <el-table-column prop="phone"
                         label="手机号"></el-table-column>
        <el-table-column prop="label"
                         label="金融产品特性标签"></el-table-column>
        <el-table-column prop="creator"
                         label="发布人"></el-table-column>
        <el-table-column prop="updatedTime"
                         label="发布时间"></el-table-column>
        <el-table-column prop="statusName"
                         label="状态"></el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button v-if="scope.row.status === 0"
                       @click="undercarriage(scope.row.id)"
                       style="margin-left: 10px;"
                       size="mini">下架</el-button>
            <template v-else>
              <el-button @click="gotoModify(scope.row.id)"
                         style="margin-left: 10px;"
                         size="mini">修改</el-button>
              <el-button @click="upShelf(scope.row.id)"
                         size="mini">上架</el-button>
            </template>
            <el-button @click="deleteFunc(scope.row.id)"
                       type="danger"
                       size="mini">删除</el-button>
            <el-button @click="detail(scope.row.id)"
                       type="info"
                       size="mini">详情</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="table-foot">
        <el-button @click="batchUndercarriage()"
                   type="primary"
                   size="small">批量下架</el-button>
        <el-button @click="batchDeleteSupplier()"
                   type="primary"
                   size="small">批量删除</el-button>
      </div>
    </div>
    <view-page :current-page="currentPage"
               :total="total"
               @change="pageChange"></view-page>
  </div>
</template>

<script>
import '@/style/common.scss'
import viewPage from '@/components/pagination'
import { api } from '@/api'
import { HTTPSUCCESS, HTTPDATAFAIL, HTTPPARAMFAIL, HTTPUNKOWNFAIL } from '@/components/constant'

export default {
  data() {
    return {
      companyName: null,
      manager: null,
      label: null,
      currentPage: 1,
      total: 100,
      supplierList: []
    }
  },
  activated() {
    this.getSupplierList()
  },
  components: { viewPage },
  methods: {
    reset() {
      this.companyName = null
      this.manager = null
      this.label = null
      this.getSupplierList()
    },
    getSupplierList() {
      const searchObj = {
        companyName: this.companyName,
        productManager: this.manager,
        label: this.label,
        pageNum: this.currentPage,
        pageSize: 10
      }
      this.$http.post(api.SYS_SUPPLIER_LIST, searchObj).then(
        res => {
          console.log(res.data)
          this.supplierList = res.data.supplierList
          this.currentPage = res.data.pageNum
          this.total = res.data.totalSize
        }
      )
    },
    pageChange(page) {
      this.currentPage = page
      this.getSupplierList()
    },
    rebuildSelectList() {
      if (this.multipleSelection) {
        const idList = []
        this.multipleSelection.forEach(element => {
          idList.push(element.supplierId)
        })
        return idList
      }
      return []
    },
    undercarriage(id) {
      const idList = [id]
      this.$confirm('确认下架？',
        {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
        this.underFunc(idList)
      })
    },
    handleSelectionChange(val) {
      this.multipleSelection = val
    },
    batchUndercarriage() {
      const idList = this.rebuildSelectList()
      this.$confirm('确认全部下架？',
        {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
        this.underFunc(idList)
      })
    },
    batchDeleteSupplier() {
      const idList = this.rebuildSelectList()
      this.$confirm('确认全部删除？',
        {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
        this.deleteFunc(idList)
      })
    },
    upShelf(id) {
      const params = {
        supplierIds: [id],
        status: 0
      }
      this.$http.post(api.SYS_SUPPLIER_MODIFY, params).then(
        res => {
          if (res.code === HTTPSUCCESS) {
            this.$msg._message('上架成功', 'success')
            this.getSupplierList()
          } else {
            this.$msg._message(res.msg, 'error')
          }
        }
      )
    },
    underFunc(list) {
      const params = {
        supplierIds: list,
        status: 1
      }
      this.$http.post(api.SYS_SUPPLIER_MODIFY, params).then(
        res => {
          if (res.code === HTTPSUCCESS) {
            this.$msg._message('下架成功', 'success')
            this.getSupplierList()
          } else {
            this.$msg._message(res.msg, 'error')
          }
        }
      )
    },
    deleteFunc(list) {
      this.$http.post(api.SYS_SUPPLIER_DEL, list).then(
        res => {
          if (res.code === HTTPSUCCESS) {
            this.$msg._message('删除成功', 'success')
            this.getSupplierList()
          } else {
            this.$msg._message(res.msg, 'error')
          }
        }
      )
    },
    gotoModify(id) {
      this.$router.push({
        name: 'modifySupplier',
        params: {
          supplierId: id,
          infoFlag: 0
        }
      })
    },
    detail(id) {
      this.$router.push({
        name: 'supplierDetail',
        params: {
          supplierId: id,
          infoFlag: 1
        }
      })
    }
  }
}
</script>
